<template>
  <div class="content">
    <dc-header :page-to="'/hello'" :title="'flex例子'" :icon="'icon-ic_nav_user'"></dc-header>
    <div>flex用例页面</div>
    <p>基础的栅格布局</p>
    <dc-row class="demo-row">
      <dc-col class="height30 redcolor" span="24">
        100%
      </dc-col>
    </dc-row>
    <dc-row>
      <dc-col class="height30 redcolor" span="6">25%</dc-col>
      <dc-col class="height30 pinkcolor" span="6">25%</dc-col>
      <dc-col class="height30 redcolor" span="6">25%</dc-col>
      <dc-col class="height30 pinkcolor" span="6">25%</dc-col>
    </dc-row>
    <dc-row>
      <dc-col class="height30 redcolor" span="8">33.33%</dc-col>
      <dc-col class="height30 pinkcolor" span="8">33.33%</dc-col>
      <dc-col class="height30 redcolor" span="8">33.33%</dc-col>
    </dc-row>
    <dc-row>
      <dc-col class="height30 redcolor" span="12">50%</dc-col>
      <dc-col class="height30 pinkcolor" span="12">50%</dc-col>
    </dc-row>
    <dc-row>
      <dc-col class="height30 pinkcolor" span="16">66.66%</dc-col>
      <dc-col class="height30 redcolor" span="8">33.33%</dc-col>
    </dc-row>
    <p>从堆叠到水平排列。
      使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。</p>
    <p>Flex 布局基础。
      使用 row-flex 定义 flex 布局，其子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。</p>

    <dc-row type="flex" justify="start">
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
    </dc-row>

    <dc-row type="flex" justify="center">
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
    </dc-row>

    <dc-row type="flex" justify="end">
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
    </dc-row>

    <dc-row type="flex" justify="space-between">
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
    </dc-row>

    <dc-row type="flex" justify="space-around">
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
      <dc-col class="height30 redcolor" span="4">col-4</dc-col>
      <dc-col class="height30 pinkcolor" span="4">col-4</dc-col>
    </dc-row>
    <p>Flex 子元素垂直对齐。</p>

    <dc-row type="flex" justify="center" align="top">
      <dc-col span="4"><p class="height100 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height50 pinkcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height120 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height80 pinkcolor">col-4</p></dc-col>
    </dc-row>

    <dc-row type="flex" justify="space-around" align="middle">
      <dc-col span="4"><p class="height100 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height50 pinkcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height120 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height80 pinkcolor">col-4</p></dc-col>
    </dc-row>

    <dc-row type="flex" justify="space-between" align="bottom">
      <dc-col span="4"><p class="height100 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height50 pinkcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height120 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height80 pinkcolor">col-4</p></dc-col>
    </dc-row>

    <dc-row type="flex" justify="space-between" :align="align">
      <dc-col span="4"><p class="height100 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height50 pinkcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height120 redcolor">col-4</p></dc-col>
      <dc-col span="4"><p class="height80 pinkcolor">col-4</p></dc-col>
    </dc-row>
    <p>通过 Flex 布局的 Order 来改变元素的排序。</p>
    <dc-row type="flex">
      <dc-col class="height30 redcolor" span="6" order="4">1 col-order-4</dc-col>
      <dc-col class="height30 pinkcolor" span="6" order="3">2 col-order-3</dc-col>
      <dc-col class="height30 redcolor" span="6" order="2">3 col-order-2</dc-col>
      <dc-col class="height30 pinkcolor" span="6" order="1">4 col-order-1</dc-col>
    </dc-row>

    <p>参照 Bootstrap 的 响应式设计，预设响应尺寸：xs</p>
    <dc-row type="flex">
      <dc-col class="height30 redcolor" :xs="2">col</dc-col>
      <dc-col class="height30 pinkcolor" :xs="20">col</dc-col>
      <dc-col class="height30 redcolor" :xs="2">col</dc-col>
    </dc-row>
    <p>span pull push offset order 属性可以通过内嵌到 xs sm md lg 属性中来使用。其中 :xs="6" 相当于 :xs="{ span: 6 }"。</p>
    <dc-row type="flex">
      <dc-col class="height30 redcolor" :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">col</dc-col>
      <dc-col class="height50 pinkcolor" :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">col</dc-col>
      <dc-col class="height30 redcolor" :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">col</dc-col>
    </dc-row>
    <dc-row type="flex">
      <dc-col class="height50 pinkcolor" :xs="{ span: 6, order: 1 }" :lg="{ span: 8, order: 3 }">col-1</dc-col>
      <dc-col class="height30 redcolor" :xs="{ span: 12, order: 2 }" :lg="{ span: 8, order: 2 }">col-2</dc-col>
      <dc-col class="height50 pinkcolor" :xs="{ span: 6, order: 3 }" :lg="{ span: 8, order: 1 }">col-3</dc-col>
    </dc-row>
  </div>
</template>
<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';

  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss">
  @import '../../assets/css/variable';

  .height30 {
    height: px2rem(80px);
  }

  .height50 {
    height: px2rem(50px);
  }

  .height100 {
    height: px2rem(100px);
  }

  .height120 {
    height: px2rem(120px);
  }

  .redcolor {
    background: antiquewhite;
  }

  .pinkcolor {
    background: pink;
  }
</style>
